<template>
  <div class="container w-100 h-100 p-relative">
    <div id='map' class="map w-100 h-100"></div>
    <div class='panel-container p-absolute'></div>
  </div>
</template>

<script>
export default{
  mounted(){
      this.initmap()
  },
  methods:{
   initmap(){
    this.$mapboxgl.accessToken = 'pk.eyJ1Ijoic2FtOTAyOSIsImEiOiJjbGJscTByeTMwYTAxM3dyMHNleWt6NXc0In0.YgT8bxaStfgw9ZAwNCpWDA';

    var map = new this.$mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/mapbox/streets-v11",
        center: [104.07, 30.67],
        zoom: 10,
      });
    }
  }
}
</script>

<style scoped lang="scss">
  .container{
    background:#999;

    .map{
      overflow:hidden;
    }
    .panel-container{
      top:0;
      left: 0;
      width: 100px;
      height: 100px;
      background:#99999950;
    }
  }
</style>